<script>
export default {
  name: "count",
  props: {
    num: {
      type: Number,
      default: 0
    }
  },
  //emits: ["add", "sub"],定义子组件内部发出的自定义事件
  emits: {
    // 对自定义事件参数的验证
    add: num => num === 1,
    sub: num => num === 1

  },
  methods: {
    btnClick(str) {
      // 子组件使用this.$emit触发一个自定义事件("自定义事件的名称",参数值)
      str === '+' ? this.$emit("add", 1) : this.$emit("sub", 1)
    }
  }

}
</script>

<template>
  <div class="layui-panel count">
    <div style="padding: 32px;">
      <h1>父组件App传递过来的num值是：{{ num }}</h1>
      <button type="button" class="layui-btn" @click="btnClick('-')">-</button>
      <button type="button" class="layui-btn" @click="btnClick('+')">+</button>
    </div>
  </div>
</template>

<style scoped lang="less"></style>